<!doctype html>
<html lang="en-us">

<head>
  <link rel="stylesheet" href="main.css" />
  <link rel="stylesheet" href="../assets/vs2015.min.css" />
  <link rel="stylesheet" href="../assets/xterm.css" />

  <script src="../assets/highlight.min.js"></script>
  <script src="../assets/verilog.min.js"></script>
  <script src="../assets/xterm.js"></script>
  <script src="../assets/xterm-addon-fit.min.js"></script>

  <title>Metron C++ to Verilog Demo</title>
  <link rel="icon" type="image/x-icon" href="../assets/favicon.ico">
</head>

<body class="flex_y">
  <div class="topbar flex_x">
    <div class="center_y">
      <img src="../assets/metron_icon.png" width="48" height="48"
        style="padding:0px; background-color:#888; margin:8px;">
      <div id="title">Metron C++ to Verilog Translator</div>
    </div>
    <div id="intro" class="center_y">
      Left editor is live, center is converted code, right is app output.<br>
      All Metron tests & examples are available for conversion. Changes persist in the virtual filesystem until reload.
    </div>
    <div id="link" class="center_y">
      <a class="github_link" href="https://github.com/aappleby/metron">Source on Github</a>
    </div>
  </div>
  <div id="panels" class="flex_x flex_1" style="background-color:#444;">
    <div id="col_src" class="flex_y flex_3">
      <div class="border center_y dark2 bar">
        <select class="dark2" id="src_selector">
          <option>./examples/tutorial/adder.h</option>
        </select>
      </div>
      <div id="src_text" class="editor flex_1 border language-cpp dark0"></div>
    </div>
    <div id="col_dst" class="flex_y flex_3">
      <div class="border center_y dark2 bar">
        <div class="bar_text" id="dst_title">./examples/tutorial/adder.sv</div>
      </div>
      <div id="dst_text" class="editor flex_1 border language-verilog dark0"></div>
    </div>
    <div id="col_log" class="flex_y flex_3">
      <div class="border center_y dark2 bar">
        <div class="bar_text" id="log_cmdline">(metron args here)</div>
      </div>
      <div id="src_controls" class="border dark2 flex_x">
        <div class="flex_1 ticky"><input type="checkbox" id="opt_help">Help</div>
        <div class="flex_1 ticky"><input type="checkbox" id="opt_verbose">Verbose</div>
        <div class="flex_1 ticky"><input type="checkbox" id="opt_quiet">Quiet</div>
        <div class="flex_1 ticky"><input type="checkbox" id="opt_echo">Echo</div>
        <div class="flex_1 ticky"><input type="checkbox" id="opt_dump">Dump</div>
        <div class="flex_1 ticky"><input type="checkbox" id="opt_monochrome">Monochrome</div>
      </div>
      <div id="log_text" class="flex_1 border dark0"></div>
    </div>
  </div>

  <script type="text/javascript" src="examples.js"></script>
  <script type="module" src="main.js"></script>
</body>

</html>
